<template>
  <div class="details-box">
    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loadingData">
      <el-tab-pane label="基础信息" name="first">
        <el-form>
          <el-form-item v-for="(item, index) in baseProps" :key="index" :label="item.label + '：'">
            <span v-if="item.prop == 'user_name'">{{ detailsData.user?.user_name }}</span>
            <span v-else-if="item.prop == 'telephone'">{{ `(${detailsData.telephone_prefix})${detailsData[item.prop]}`
            }}</span>
            <span v-else>{{ detailsData[item.prop] }}</span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="运营信息" name="second">
        <el-form>
          <el-form-item v-for="(item, index) in operateProps" :key="index" :label="item.label + '：'">
            {{ detailsData[item.prop] }}
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="账户信息" name="third">
        <el-form>
          <el-form-item label="收款模式及账户：">
            <div class="flexLeftCenter association" v-for="(item, index) in detailsData.payee" :key="index">
              <p>{{ item.provider.name }}</p>
              <p>{{ item.merchant_no }}</p>
              <p :style="{ color: 'var(--el-color-primary)', cursor: 'pointer',textDecoration:'underline'}" @click.stop="toPOSList(item.pos_sn_no)">
                已关联{{ item.num }}个SN号</p>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- 返回 -->
    <el-button type="primary" @click="back" class="back-btn">返 回</el-button>
    <!-- 查询pos机 -->
    <QueryPOS ref="queryPOSRef" />
  </div>
</template>
<script setup>
import QueryPOS from './components/QueryPOS.vue';
import { merchantDetail, getClientDeviceBySn } from '@/api/merchantManage/merchantManage';
import { onMounted, ref } from 'vue';
import { useRoute ,useRouter} from 'vue-router';
import { ElLoading } from 'element-plus';
import { isEmpty } from 'lodash-es';

const route = useRoute();
const router = useRouter();
const activeName = ref('first');
const detailsData = ref({});
const loadingData = ref(false);
const queryPOSRef = ref(null);

const baseProps = ref([
  { label: '商家编号', prop: 'client_no' },
  { label: '商家名称', prop: 'client_name' },
  { label: '所属国家', prop: 'belong_country_cn' },
  { label: '联系人', prop: 'contacts' },
  { label: '联系电话', prop: 'telephone' },
  { label: '联系地址', prop: 'address' },
  { label: '管理员姓名', prop: 'user_name' },
  { label: '登录邮箱', prop: 'client_email' },
  { label: '创建时间', prop: 'create_time' },
])

const operateProps = ref([
  { label: '货币单位', prop: 'unit' },
  { label: 'POS机预授权金额', prop: 'allow_money' },
])

// methods
const handleClick = async (tab) => {
  activeName.value = tab.paneName;
}

const toPOSList = async (pos_sn_no) => {
  if (!isEmpty(queryPOSRef.value.posList)) {
    return queryPOSRef.value.dialogVisible = true;
  }
  const Eld = ElLoading.service({ fullscreen: true, text: '加载中...' })
  const res = await getClientDeviceBySn({ pos_sn_no: pos_sn_no });
  Eld.close();
  if (res.code === 1000) {
    queryPOSRef.value.posList = res.data;
    console.log(queryPOSRef.value.posList);
    queryPOSRef.value.dialogVisible = true;
  }
}

const back = () => {
  router.go(-1);
}

// life
onMounted(async () => {
  loadingData.value = true;
  const res = await merchantDetail(route.query.client_no);
  loadingData.value = false;
  if (res.code === 1000) {
    detailsData.value = res.data;
  }
})
</script>
<style lang="less" scoped>
.details-box {
  margin: 20px;

  .my-label {
    width: 120px;
  }

  .association {
    width: 100%;
    margin-bottom: 10px;

    p {
      margin-left: 30px;
    }
  }
}
.back-btn{
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
}
</style>